<template>
  <div id="goods">
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
        <el-row :gutter="10">
            <el-col :span="8">
                <el-input placeholder="请输入内容" v-model="queryinfo.query" clearable @clear="getGoods" >
                    <el-button slot="append"  @click="getGoods" icon="el-icon-search"></el-button>
                </el-input>
            </el-col>
            <el-col :span=4><el-button type="primary" @click="addGoods">添加商品</el-button></el-col>
        </el-row>

        <el-table :data="goodslist" border >
            <el-table-column type="index" label="序号" width="50"> </el-table-column>
            <el-table-column prop="goods_name" label="商品名称"> </el-table-column>
            <el-table-column prop="goods_price" label="商品价格"> </el-table-column>
            <el-table-column prop="goods_weight" label="商品重量"> </el-table-column>
            <el-table-column prop="add_time" label="创建时间"> 
                <template slot-scope="scope">{{scope.row.add_time | dataFormat }}</template>
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary"  size="small" icon="el-icon-edit"></el-button>
                    <el-button type="danger" @click="remove(scope.row)" size="small" icon="el-icon-delete"></el-button>    
                </template>
            </el-table-column>
        </el-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryinfo.pagenum"
        :page-sizes="[5, 10, 20]" :page-size="queryinfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination> 
    </el-card>
  </div>
</template>

<script>

export default {
  name: 'goods',
  data() {
      return {
          queryinfo:{
                query:'',
                pagenum:1,//当前页数
                pagesize:3//当前页显示的条数
            },
            total:0,
            goodslist:[]
      }
  },
  created(){
      this.getGoods()
  },
  methods:{
      async getGoods(){
          const{data:res}=await this.$http.get('goods',{params:this.queryinfo})
            if(res.meta.status!=200){
                return this.$message.error(res.meta.msg)
            }else{
                this.goodslist=res.data.goods
                this.total=res.data.total
            }
      },
      // pagesize改事件
        handleSizeChange(newsize){
            this.queryinfo.pagesize=newsize
            this.getGoods()
        },
        // 页码值发生改变的事件
        handleCurrentChange(newpage){
            this.queryinfo.pagenum=newpage
            this.getGoods()
        },
        async remove(row){
            const result=await this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err=>err)
            if(result=='confirm'){
                const{data:res}=await this.$http.delete(`goods/${row.goods_id}`)
                if(res.meta.status==200){
                    this.$message({type: 'success',message: '删除成功!'})
                    this.getGoods()
                }else{
                    return this.$message.error(res.meta.msg)
                }       
            }
        },
        addGoods(){
            this.$router.push('/goods/add')
        }
  }
}
</script>

<style>

</style>
